<template>
  <div class="home">
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="../assets/img/lunbo1.jpeg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/lunbo2.jpeg" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/img/lunbo3.jpeg" alt=""></van-swipe-item>\
  <van-swipe-item><img src="../assets/img/lunbo4.jpg" alt=""></van-swipe-item>

</van-swipe>

<van-tree-select height="55vw" :items="items" :main-active-index.sync="active">
  <template #content>
    <div  v-if="active === 0">
    <fenlei></fenlei>
    </div>
    <div  v-if="active === 1">
       <ul id="myway" v-for="fenlei in gaoxiao" :key="fenlei.id">
         <router-link tag="div" :to="/found-detail/+fenlei.id">
        <li>{{fenlei}}
        </li> 
        <van-divider />
         </router-link>
      </ul>
       <p>没有更多了</p>
    </div>
    <div  v-if="active === 2">
       <ul id="myway" v-for="fenlei in qinggan" :key="fenlei.id">
         <router-link tag="div" :to="/found-detail/+fenlei.id">
        <li>{{fenlei}}
        </li> 
        <van-divider />
         </router-link>
      </ul>
       <p>没有更多了</p>
    </div>
    <div  v-if="active === 3">
       <ul id="myway" v-for="fenlei in youxi" :key="fenlei.id">
         <router-link tag="div" :to="/found-detail/+fenlei.id">
        <li>{{fenlei}}
        </li> 
        <van-divider />
         </router-link>
      </ul>
       <p>没有更多了</p>
    </div>
  </template>
</van-tree-select>


    <tab-btn></tab-btn>
  </div>
</template>

<script>
import axios from 'axios'
import fenlei from '@/components/fenlei'
import tabBtn from "../components/tabBtn";
export default {
  data() {
    return {
      fenleis:[],
      gaoxiao:['狂欢夜','校园奇葩','疯狂社区'],
       qinggan:['情感点滴','小丑竟是自己','失恋这件小事'],
       youxi:['阴阳师社区','王者荣耀社区','和平精英社区'],
      active:0,
      items:[
        { text: '推荐', children:[]},
        { text: '搞笑', children: []},
        { text: '情感', children: []},
        { text: '游戏', children: []},
        { text: '影视', children: []},
        { text: '音乐', children: []},
        { text: '生活', children: []},
        { text: '动漫', children: []},
        { text: '数码', children: []},
        { text: '体育', children: []},
        { text: '社团', children: []},
      ],
      activeId: 1,
      activeIndex: 0,
    };
  },
  components: {
    tabBtn,
    fenlei
  },
    created() {    
      axios.get('http://localhost:3000/found_type')
        .then(res => {
          this.fenleis=res.data.data
        
            
          console.log(this.fenleis);
          
        })
        .catch(error => {
          console.log(error);
        })
  },
};
</script>

<style lang="less" scoped>


    p{
      color: rgb(199, 203, 206);
      text-align: center;
    }

#myway li{
  margin-bottom: 25px;
  margin-left: 20px;
  
}
.van-tree-select__content{
  margin: 15px;
}
.van-tree-select{
    height: 100%!important;
    margin-bottom: 50px;
}
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    
  }
  .van-icon-success::before{
    display: none;
  }
.van-ellipsis{
  font-size: 5px;
}
/deep/ .van-swipe{
  margin: 10px;
  height:150px ;
  img{
    width: 100%;
    height: 150px;
  }
}

</style>
